<template>
	<view class="page">
		<view class="content">
			<view class="pannel">
				<view class="list" @click="goToUrl('/pages/user/point/pointInfo')">
					<u-icon name="list" color="#fff"></u-icon>
				</view>
				<view class="top">
					<u--text text="2000.00" color="white" size=30 lineHeight="1em"></u--text>
					<u--text text="积分" color="white" margin="0 0 0 20rpx" size=12></u--text>
				</view>
			</view>
			<view class="goods-list">
				<view class="goods-item" @click="goToUrl('/pages/user/point/pointGoodDetail')">
					<view>
						<u--image :showLoading="true" :src="src" width="305rpx" height="305rpx"></u--image>
					</view>
					<view>
						<view class="title">商品通用现金券-50元(兑换前看详情)</view>
						<view class="point">180000积分</view>
					</view>
				</view>
				<view class="goods-item">
					<view>
						<u--image :showLoading="true" :src="src" width="305rpx" height="305rpx"></u--image>
					</view>
					<view>
						<view class="title">商品通用现金券-50元(兑换前看详情)</view>
						<view class="point">180000积分</view>
					</view>
				</view>
				<view class="goods-item">
					<view>
						<u--image :showLoading="true" :src="src" width="305rpx" height="305rpx"></u--image>
					</view>
					<view>
						<view class="title">商品通用现金券-50元(兑换前看详情)</view>
						<view class="point">180000积分</view>
					</view>
				</view>
				<view class="goods-item">
					<view>
						<u--image :showLoading="true" :src="src" width="305rpx" height="305rpx"></u--image>
					</view>
					<view>
						<view class="title">商品通用现金券-50元(兑换前看详情)</view>
						<view class="point">180000积分</view>
					</view>
				</view>
				<view class="goods-item">
					<view>
						<u--image :showLoading="true" :src="src" width="305rpx" height="305rpx"></u--image>
					</view>
					<view>
						<view class="title">商品通用现金券-50元(兑换前看详情)</view>
						<view class="point">180000积分</view>
					</view>
				</view>
				<view class="goods-item">
					<view>
						<u--image :showLoading="true" :src="src" width="305rpx" height="305rpx"></u--image>
					</view>
					<view>
						<view class="title">商品通用现金券-50元(兑换前看详情)</view>
						<view class="point">180000积分</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script >
export default {
	data() {
		return {
			src: 'https://cdn.uviewui.com/uview/album/1.jpg'
		}
	},
	methods: {

	}
}
</script>
<style lang="scss" scoped>
.content {
	padding: 20rpx;

	.pannel {
		background: linear-gradient(180deg, #3A61ED 0%, #5656F1 100%);
		border-radius: 10rpx;
		padding: 30rpx 40rpx;
		position: relative;

		.list {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.top {
			display: flex;

			::v-deep .u-text {
				flex: 0;
			}

			::v-deep .u-text__value {
				white-space: nowrap !important;
				align-self: flex-end;
			}
		}
	}

}

.goods-list {


	display: flex;
	flex-wrap: wrap;

	.goods-item {
		width: 300rpx;
		padding: 20rpx;
		margin-right: 30rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.title {
			font-weight: bold;
			font-size: 24rpx;
			margin-top: 20rpx;
		}

		.point {
			color: #F21E46;
			font-size: 24rpx;
			font-weight: bold;
			margin-top: 10rpx;
		}
	}

	.goods-item:nth-child(even) {
		margin-right: 0rpx;
	}
}
</style>
